<script setup lang='ts' name="edit-list-info">
import type { FormInstance } from 'element-plus'
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridListeners, VxePagerEvents, VxeTableInstance } from 'vxe-table'

import { SearchTable } from '@fl/components'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const tableRef = ref<VxeTableInstance<any>>()

const form = ref({
    date: '',
    name: '',
    user: '',
})
const gridOptions = reactive<any>({
    border: true,
    columns: [
        { field: 'module_name', title: '订单编号' },
        { field: 'module_name', title: '子订单编号' },
        { field: 'module_name', title: '订单名称' },
        { field: 'module_name', title: '供应商名称' },
        { field: 'module_name', title: '下单用户' },
        { field: 'module_name', title: '下单金额' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 350,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})
function goToList() {
    router.replace('/purchase-order-management/purchase-sales-order')
}
</script>

<template>
    <el-card mb-20>
        <div class="info-title">
            修改订单明细
        </div>

        <div class="info-title">
            订单信息
        </div>

        <el-form :model="form"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="项目名称:">
                        项目名称2024 {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="订单名称:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="采购下单人:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="下单人手机号:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="战略协议:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="采购商名称:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="收货地址:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="期望交货日期:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="备注:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="附件信息:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <el-card mb-20>
        <div class="info-title">
            原产品信息
        </div>

        <el-form :model="form"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-form-item label="运输费:">
                        100.00
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item label="安装费:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item label="其他费用:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="3"
                        :offset="12"
                >
                    <el-form-item label="订单总额:">
                        <span style="color: red">6150.00</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="gridOptions.loading"
        />
    </el-card>

    <el-card mb-20>
        <div class="info-title">
            产品修改说明
        </div>

        <el-form :model="form"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-form-item label="运输费:">
                        100.00
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item label="安装费:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item label="其他费用:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="3"
                        :offset="12"
                >
                    <el-form-item label="订单总额:">
                        <span style="color: red">6150.00</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="附件信息:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="gridOptions.loading"
        />
    </el-card>

    <el-card mb-20>
        <div class="info-title">
            收货信息
        </div>

        <el-form :model="form"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="预计发货时间:">
                        项目名称2024 {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="供应商联络人:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="联络人手机号码:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="备注:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <el-card>
        <div style="text-align: center;">
            <ElButton @click="goToList">
                返回
            </ElButton>
        </div>
    </el-card>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
}
</style>
